<script setup lang="ts">
import {message} from "ant-design-vue";
import TableColumnConfig from "~/components/lib/TableColumnConfig";
import ExclamationCircleFilled from "@ant-design/icons-vue/ExclamationCircleFilled";
import UndoOutlined from "@ant-design/icons-vue/UndoOutlined";
import DragOutlined from "@ant-design/icons-vue/DragOutlined";

const emit = defineEmits([
  "refresh",
]);
const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  tableName: {
    type: String,
    default: () => '星察数据',
  }
});
const currentColumns = ref(TableColumnConfig.getTableInfo(props.columns, props.tableName));
watch(() => props.columns, (newVal) => {
  currentColumns.value = TableColumnConfig.getTableInfo(newVal, props.tableName);
}, {
  deep: true,
});
const show = ref(true);
const changeSort = (e) => {
  show.value = false;
  const {
    oldIndex,
    newIndex
  } = e;
  const arr = [...currentColumns.value]; // 创建一个新的数组，以避免直接修改原数组
  if (arr[oldIndex].fixed || arr[newIndex].fixed) {
    // 如果移动了禁用的元素，将该元素移回原来的位置
    const movedItem = arr.splice(newIndex, 1)[0];
    arr.splice(oldIndex, 0, movedItem);
    currentColumns.value = arr;
  } else {
    // 如果移动了启用的元素，直接修改原数组 替换两个元素的位置
    const movedItem = arr.splice(oldIndex, 1)[0];
    arr.splice(newIndex, 0, movedItem);
    currentColumns.value = arr;
  }
  console.log(currentColumns.value.map((item) => item.title));
  nextTick(() => {
    show.value = true;
  });
};
const keywords = ref('');
const reset = () => {
  currentColumns.value = TableColumnConfig.getTableInfo(props.columns, props.tableName, true);
};
const save = () => {
  TableColumnConfig.setTableInfo(props.tableName, currentColumns.value, props.columns);
  message.success('表格列设置成功！');
  emit('refresh');
};
const checkedTitles = ref([]);
</script>

<template>
  <div style="width: 360px;">
    <a-row type="flex">
      <a-col>
        表格列设置
        <a-popover placement="bottom">
          <ExclamationCircleFilled style="color: #e6a23c"/>
          <template #content>
            操作说明：<br>
            展示：设置列是否在转化页面展示<br>
            可导出：设置列是否可导出到本地<br>
            位置：拖动可调整列的位置<br>
            仅对此浏览器有效，更换浏览器或电脑，需重新设置<br>
          </template>
        </a-popover>
      </a-col>
      <a-col flex="1" style="text-align: center;">
        <a-input-search size="small" v-model:value="keywords" placeholder="全局搜索"
                        style="width: 160px;display: inline-block"
        />
      </a-col>
      <a-col>
        <a-button type="link" size="small" @click="reset">
          <UndoOutlined/>
          默认
        </a-button>
      </a-col>
    </a-row>
    <a-divider style="margin: 10px 0;"/>
    <div class="btop box">
      <div class="item">列名称</div>
      <!--      <div class="item">固定</div>-->
      <div class="item">展示</div>
      <div class="item">可导出</div>
      <div class="item">位置</div>
    </div>
    <a-spin :spinning="!show">
      <div class="scroll" v-sortable="{
      options:{
        filter: '.f',
        dragClass: 'drag',
      },
      value: currentColumns,
    }" @end="changeSort"
      >
        <div v-for="item in currentColumns" :key="item.key" class="box record" :class="{
        f: item.fixed,
        drag: !item.fixed,
      }"
             :style="{
              cursor: item.fixed?'not-allowed':'move',
           }"
             v-if="show"
             v-show="item.title.includes(keywords)"
        >
          <div class="item">
            <a-checkbox :checked="checkedTitles.includes(item.title)" :value="item.title" @change="(e)=>{
              if(e.target.checked){
                checkedTitles.push(item.title);
              }else{
                checkedTitles.splice(checkedTitles.indexOf(item.title), 1);
              }
            }"/>
            {{ item.title }}
          </div>
          <!--        <div class="item">-->
          <!--          <a-switch v-model="item.fixed"/>-->
          <!--        </div>-->
          <div class="item">
            <a-switch v-model:checked="item.show" size="small" :disabled="item.fixed"/>
          </div>
          <div class="item">
            <a-switch v-model:checked="item.export" size="small" :disabled="item.fixed"/>
          </div>
          <div class="item">
            <DragOutlined style="cursor: move;"/>
          </div>
        </div>
      </div>
      <div class="box btop" style="margin-top: 10px;">
        <div class="item">
          <a-checkbox :value="checkedTitles.length===currentColumns.length" @change="(e)=>{
            checkedTitles = e.target.checked?currentColumns.map((item)=>item.title):[];
          }"
          />
          批量设置
        </div>
        <div class="item">
          <a-switch @change="(e)=>{
            currentColumns.forEach((item)=>{
              if(!item.fixed){
                item.show = e;
              }
            });
          }" size="small" :checked="currentColumns.every((item)=>item.show)"
                    :disabled="checkedTitles.length!==currentColumns.length"
          />
        </div>
        <div class="item">
          <a-switch @change="(e)=>{
            currentColumns.forEach((item)=>{
              if(!item.fixed){
                item.export = e;
              }
            });
          }" size="small" :checked="currentColumns.every((item)=>item.export)"
                    :disabled="checkedTitles.length!==currentColumns.length"
          />
        </div>
        <div class="item" style="font-size: 12px;color: #666;">
          -
        </div>
      </div>
    </a-spin>
    <a-divider style="margin: 10px 0;"/>
    <a-row>
      <a-col flex="1">
        <span style="font-size: 12px;color: #666;">设置后浏览器会记录表格列设置</span>
      </a-col>
      <a-col>
        <a-space>
          <a-button size="small" @click="()=>emit('refresh')">取消</a-button>
          <a-button type="primary" size="small" @click="save">确定</a-button>
        </a-space>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="less" scoped>
.scroll {
  height: 250px;
  overflow: auto;
}

.box {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 5px 10px;
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
  &.record {
    border-radius: 5px;
    border: 1px solid #eee;
  }

  &.btop {
    background: rgb(249, 249, 249);
  }

  .item {
    &:first-child {
      width: 120px;
    }

    &:not(:first-child) {
      flex: 1;
      text-align: center;
    }

    overflow: hidden;
    // 一行显示不下的部分省略号
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
